<template>
  <footer class="tab-bar">
    <ul class="tab-bar-list">
      <!-- 
                vue-router中提供了用于
                声明式跳转【类似a标签】的组件

             -->
      <li class="tab-bar-item" v-for="item in tabs" :key="item.id">
        <!-- 
            to 属性用于页面跳转路径
            active-class 是激活路由的类名
         -->
        <router-link :to="item.path" active-class="active">
          <van-icon :name="item.iconName" />
          <span> {{ item.title }} </span>
        </router-link>
      </li>
    </ul>
  </footer>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      tabs: [
        {
          id: 1,
          title: "首页",
          iconName: "wap-home-o",
          path: "/main",
          name: "home",
        },
        {
          id: 2,
          title: "9.9包邮",
          iconName: "gift-o",
          path: "/nines",
          name: "nines",
        },
        {
          id: 3,
          title: "分类",
          iconName: "certificate",
          path: "/ceat",
          name: "caet",
        },
        {
          id: 4,
          title: "收藏",
          iconName: "music-o",
          path: "/show",
          name: "show",
        },
        {
          id: 5,
          title: "我的",
          iconName: "user-o",
          path: "/mine",
          name: "mine",
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="stylus" scoped>
@import '../../assets/style/border.styl';
@import '../../assets/style/theme.styl';
.tab-bar
    background #fff
    width 100%
    height .468rem
    border 1px 0 0 0, #ccc
    padding-top .02rem
    background-color #fff
    .tab-bar-list
        display flex
        .tab-bar-item
            width 20%
            a
                display flex
                flex-direction column
                justify-content center
                align-content center
                text-align center
                color #696969
                &.active
                    color $themeColor
                .van-icon
                    font-size .25rem
                    margin-bottom .04rem
                span
                    font-size .1rem
</style>
